<template>
  <el-form
    ref="addExampleForm"
    :model="addExampleForm"
    :rules="addExampleRules"
    label-width="150px"
    :inline="true"
    label-position="left"
    status-icon
    inline-message
    style="padding:20px; text-align: center"
  >
    <el-row type="flex">
      <el-col :span="24">
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="addExampleForm.phone" placeholder="请输入手机号" class="input" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row type="flex">
      <el-col :span="24">
        <el-form-item label="昵称" prop="nick_name">
          <!-- readonly
              onfocus="this.removeAttribute('readonly')"
              @input="$forceUpdate()"
              解决浏览器自动填充昵称问题
            -->
          <el-input
            v-model="addExampleForm.nick_name"
            placeholder="请输入昵称"
            class="input"
            readonly
            onfocus="this.removeAttribute('readonly')"
            @input="$forceUpdate()"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row type="flex">
      <el-col :span="24">
        <el-form-item :label="'密码\n(默认密码:abc123)'" prop="password">
          <el-input v-model="addExampleForm.password" placeholder="密码" type="password" class="input" />
        </el-form-item>
      </el-col>
    </el-row>
    <!-- select示例 -->
    <el-row type="flex">
      <el-col :span="24">
        <el-form-item label="性别" prop="select">
          <el-select v-model="addExampleForm.select" placeholder="请选择" class="select">
            <el-option
              v-for="item in selectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <!-- select示例结束 -->
    <el-row type="flex" justify="center">
      <el-col :span="12">
        <el-form-item>
          <el-button type="primary" @click="submitForm('addExampleForm')">添加用户</el-button>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item>
          <el-button @click="resetForm('addExampleForm')">重置</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import { debounce } from '@/utils'
import { validPassword, validPhone } from '@/utils/validate'
export default
{
  // 组件名称
  name: 'Index',
  // 组件
  components:
		{
		},
  props:
		{
		},
  // 数据
  data()
  {
    const validatePhone = (rule, value, callback) =>
    {
      if (!validPhone(value))
      {
        callback(new Error('手机号不正确'))
      }
      else
      {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) =>
    {
      if (!validPassword(value))
      {
        callback(new Error('请输入正确密码'))
      }
      else
      {
        callback()
      }
    }
    return {
      msg: '我是首页',
      //   select选项
      selectOptions: [{
        value: '1',
        label: '男'
      }, {
        value: '2',
        label: '女'
      },
      {
        value: '0',
        label: '未知'
      }
      ],
      // 添加菜单表单
      addExampleForm: {
        id: 0,
        source_id: 0,
        phone: '',
        password: 'abc123',
        sex: '1',
        nick_name: ''
      },
      // 添加表单规则
      addExampleRules: {
        phone: [
          { required: true, message: '必须有手机号', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ],
        password: [
          { type: 'string', required: true, message: '请输入密码', trigger: 'blur' },
          { validator: validatePassword, trigger: 'blur' }
        ],
        nick_name: [
          { pattern: /^[a-zA-Z0-9_\u4e00-\u9fa5]{1,10}$/, message: '只能以字母,数字,汉字和_这种字符组成,且不得低于1位', trigger: 'blur' }
        ]
      }
    }
  },
  // 计算属性
  computed:
		{
		},
  // 监听
  watch:
		{
		},
  // 实例创建之前
  beforeCreate()
  {
  },
  // 创建
  created()
  {
  },
  // 挂载之前
  beforeMount()
  {
  },
  // 挂载 --常用
  mounted()
  {
  },
  // 更新之前
  beforeUpdate()
  {
  },
  // 跟新后
  updated()
  {
  },
  // 销毁之前
  beforeDestroy()
  {
  },
  // 销毁后
  destroyed()
  {
  },
  // 方法
  methods:
  {
    // 提交表单
    submitForm: debounce(function(formName)
    {
      this.$refs[formName].validate((valid) =>
      {
        if (valid)
        {
          // this.addExample(this.addExampleForm)
        }
        else
        {
          console.log('未通过验证!')
          return false
        }
      })
    }, 600)
  }
}
</script>
<style lang='scss' scoped>
.select,
.input {
  width: 250px;
}
::v-deep .el-form-item__label {
  white-space: pre-line;
}
</style>
